<template>
  <div>
    <el-form ref="ownerVO" :inline="true" :model="ownerVO" class="owner-form-inline">
      <el-form-item label="业主昵称:">
        <el-input
          v-model="ownerVO.ownerNickname"
          placeholder="请输入业主昵称"
          prefix-icon="el-icon-search"
        />
      </el-form-item>
      <el-form-item label="业主姓名：">
        <el-input
          v-model="ownerVO.ownerRealName"
          placeholder="请输入业主姓名"
          prefix-icon="el-icon-search"
        />
      </el-form-item>
      <el-form-item label="身份证号码：">
        <el-input
          v-model="ownerVO.ownerIdCard"
          placeholder="请输入身份证号码"
          prefix-icon="el-icon-search"
        />
      </el-form-item>
      <el-form-item label="电话号码：">
        <el-input
          v-model.number="ownerVO.ownerPhoneNumber"
          placeholder="请输入电话号码"
          prefix-icon="el-icon-search"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadOwner(current, size, ownerVO)">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>

    <!--文件导出按钮-->
    <el-button
      size="small"
      type="success"
      class="file-download"
      icon="el-icon-download"
      @click="fileDownload"
    >导出</el-button>

    <el-table
      :data="owners"
      style="width: 100% ; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) ;margin-top: 1%;margin-left: 2%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="30"
      />
      <el-table-column
        label="序号"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.$index +1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="昵称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerNickname }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="真实姓名"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerRealName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="性别"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerGender }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="年龄"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerAge }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="身份证号码"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerIdCard }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="手机号码"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerPhoneNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="小区名称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.communityName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="楼栋名称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="单元名称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.unitName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="房间名称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="出生日期"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerBirthday }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="业主类型"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-close"
            size="mini"
            @click="unbindOwner(scope.$index, scope.row)"
          >解除绑定</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页标签-->
    <div class="el-pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.current"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="this.size"
        layout=" sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      size: 3,
      current: 1,
      total: 0,
      owner: { ownerId: '', ownerRoomId: '', ownerNickname: '', ownerRealName: '', ownerGender: '', ownerAge: '', ownerIdCard: '',
        ownerPhoneNumber: '', ownerBirthday: '', ownerType: '', roomId: '', communityName: '', buildingName: '',
        unitName: '', roomName: '' },
      owners: [], // 所有页面的数据
      ownerVO: { ownerNickname: '', ownerRealName: '', ownerIdCard: '', ownerPhoneNumber: '' },
      multipleSelection: [], // 存放单选框里的数据
      ids: [],
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  created() {
    this.loadOwner(this.current, this.size)
  },
  methods: {
    // 加载页面数据+模糊查询
    loadOwner(current, size, ownerVO) {
      this.axios({
        url: 'http://localhost:8080/owners/page?' + this.qs.stringify(ownerVO),
        methods: 'GET',
        params: {
          current: current,
          size: size
        }
      }).then(res => {
        console.log(res.data.data.records)
        this.owners = res.data.data.records
        this.current = res.data.data.current
        this.size = res.data.data.size
        this.total = res.data.data.total
      })
    },
    // 选择菜单栏
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 重置按钮
    resetForm() {
      this.ownerVO = { ownerNickname: '', ownerRealName: '', ownerIdCard: '', ownerPhoneNumber: '' }
      this.loadOwner(this.current, this.size)
    },
    // 解绑业主与房屋之间的关系
    unbindOwner(index, row) {
      console.log(row.ownerRoomId)
      // 打开消息弹窗
      this.$confirm('这项操作将解绑业主与房屋的关系, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post('http://localhost:8080/owner/' + row.ownerRoomId)
          .then(res => {
            this.loadOwner(this.current,this.size)
          })
        this.$notify({
          type: 'success',
          message: '解绑成功!'
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消解绑'
        })
      })
    },
    // 文件下载
    fileDownload() {
      this.axios({
        type: 'GET',
        url: 'http://localhost:8080/owner/excel/',
        data: JSON.stringify(this.ids),
        responseType: 'arraybuffer'
      })
        .then(res => {
          const blob = new Blob([res.data], { type: 'multipart/vnd.ms-excel' })
          const link = document.createElement(`a`)
          link.href = URL.createObjectURL(blob)
          link.download = Date.now() + '.xlsx'
          link.click()
          this.ids = []
        })
    },
    // 分页插件
    handleSizeChange(val) {
      this.size = val
      this.loadOwner(this.current, this.size, this.ownerVO)
    },
    handleCurrentChange(val) {
      this.current = val
      this.loadOwner(this.current, this.size, this.ownerVO)
    }
  }
}
</script>

<style scoped>
  .owner-form-inline{
    margin-left: 2%;
    margin-top: 2%;
  }
  .file-download{
    margin-left: 2%;
    margin-top: 1%;
  }
  .el-pagination{
    margin-left: 1%;
    margin-top: 1%;
  }
</style>
